<template>
    <LoginDialog ref="loginDialogRef" />
    <div class="activity-admin-wrapper">
      <div class="wrapper-mask">
        <div class="wrapper-sidebar">
          <div class="sidebar-menu">
            <div
              class="sidebar-item"
              v-for="(item, index) in sidebar"
              :key="index"
              :class="{ active: item.type === currentType }"
              @click="changeCurrentMenu(item)"
            >
              <van-icon :size="32" :name="item.icon" />
              <div class="text">{{ item.title }}</div>
            </div>
          </div>
          <template v-if="userStore.authInfo">
            <div class="sidebar-user">
              <div class="avatar">
                <van-image round width="40" height="40" fit="contain" :src="adminIcon" />
              </div>
            </div>
            <div class="user-info">
              <el-tag style="font-size: 11px;">{{ getMaskedMobile(userStore.authInfo.mobile) }}</el-tag>
            </div>
            <div class="user-info" style="margin-bottom: 15px">
              <el-link type="danger" style="font-size: 12px; margin-top: 5px" @click="logout">退出</el-link>
            </div>
          </template>
          <template v-else>
            <div class="sidebar-user">
              <div class="avatar">
                <el-avatar @click="openLogin"> <span style="font-size: 10px">未登录</span> </el-avatar>
              </div>
            </div>
          </template>
        </div>
        <div class="wrapper-container">
          <transition
            enter-active-class="animate__animated animate__fadeInRight animate__faster"
            leave-active-class="animate__animated animate__fadeOutLeft animate__faster"
          >
            <div class="wrapper-item" v-if="currentType === 'showProduct'">
              <ProductList />
            </div>
          </transition>
          <transition
            enter-active-class="animate__animated animate__fadeInRight animate__faster"
            leave-active-class="animate__animated animate__fadeOutLeft animate__faster"
          >
            <div class="wrapper-item" v-if="currentType === 'showMy'">
              <ApplyRecordList />
            </div>
          </transition>
          <transition
            enter-active-class="animate__animated animate__fadeInRight animate__faster"
            leave-active-class="animate__animated animate__fadeOutLeft animate__faster"
          >
            <div class="wrapper-item" v-if="currentType === 'showTask'">
              <TaskList />
            </div>
          </transition>
        </div>
      </div>
    </div>
  </template>
  <style scoped>
  @import './style/admin.less';
  </style>
  <script lang="ts" setup>
  import * as Vue from 'vue'
  import { useRouter } from 'vue-router'
  
  import ProductList from './components/ProductList.vue'
  import ApplyRecordList from './components/ApplyRecordList.vue'
  import TaskList from './components/TaskList.vue'
  
  import { useUserStore } from '@/stores/useStore'
  import { ApplyModule } from '@/services/modules/apply'
  import LoginDialog from '@/view/user/LoginDialog.vue'
  import adminIcon from '@/assets/images/icon-admin.png'
  
  type MenuType = 'showProduct' | 'showMy' | 'showTask'
  
  const router = useRouter()
  const userStore = useUserStore()
  const loginDialogRef = ref<typeof LoginDialog | null>(null)
  
  
  const currentType = Vue.ref<MenuType>()
  const sidebarList: Array<{ type: MenuType; title: string; icon: string }> = [
    { type: 'showProduct', title: '首页', icon: 'chart-trending-o' },
    { type: 'showMy', title: '我的', icon: 'friends-o' },
    { type: 'showTask', title: '日历', icon: 'comment-o' },
  ]
  const sidebar = Vue.computed(() => {
    const config = {
      showProduct: true,
      showMy: true,
      showTask: true,
    }
    if (!config) return []
    // 根据 config 中的配置项来过滤菜单项
    return sidebarList.filter((item) => config[item.type] === true)
  })
  
  // 处理手机号显示为尾号xxxx格式的函数
const getMaskedMobile = (mobile: string | undefined) => {
  if (!mobile) {
    return '暂无手机号'
  }
  return `尾号${mobile.slice(-4)}`
}
  // **检查是否已登录**
  const openLogin = () => {
    loginDialogRef.value?.openDialog() // 使用 `?.` 避免 `null` 报错
  }
  
  const changeCurrentMenu = (item: any) => {
    if (item.type === 'showMy' || item.type === 'showTask') {
      const authToken = userStore.getAuthToken()
      if (!authToken) {
        openLogin();
        return;
      }
    }
  
    currentType.value = item.type
  }
  
  Vue.onBeforeMount(async () => {
    const authToken = userStore.getAuthToken()
    if (authToken) {
      userStore.getAccountInfo()
    }
    const visibleSidebar = sidebar.value
    if (visibleSidebar.length > 0) {
      currentType.value = visibleSidebar[0].type // 默认选择第一个显示的模块
    }
  })
  
  function logout() {
    showConfirmDialog({ title: '提示', message: '确认要退出账号吗？' }).then(() => {
      const cookie = document.cookie
      if (cookie) {
        cookie.split(';').forEach((cookie) => {
          const [name] = cookie.split('=')
          document.cookie = `${name.trim()}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`
        })
      }
      userStore.userLogout();
      router.replace({ name: 'ClientLanding'})
    })
  }
  </script>
  